
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>气象服务</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <link th:href="@{/assets/plugins/jquery-ui/jquery-ui.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/plugins/bootstrap/4.1.0/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/plugins/font-awesome/5.0/css/fontawesome-all.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/plugins/animate/animate.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/css/default/style.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/css/default/style-responsive.min.css}" rel="stylesheet" />
    <link th:href="@{/assets/css/default/theme/default.css}" rel="stylesheet" />
    <link th:href="@{/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" rel="stylesheet"/>
    <link th:href="@{/assets/plugins/echarts3/echartsHome.css}" rel="stylesheet">
    <!-- ================== END BASE CSS STYLE ================== -->
    <!-- ================== BEGIN BASE JS ================== -->
    <!-- ================== END BASE JS ================== -->
</head>
<body>
<!-- begin #page-container -->
<div id="page-container" class="fade page-without-sidebar">
    <!-- begin #content -->
    <div id="content" class="content">
        <!-- begin row -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <a href="javascript:;" style="text-decoration:none; color:#333">
                    <div class="widget widget-stats bg-gradient-teal">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-wrench fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-number">设备管理</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- end col-3 -->
            <!-- begin col-3 -->
            <div class="col-lg-3 col-md-6">
                <a href="javascript:;" style="text-decoration:none; color:#333">
                    <div class="widget widget-stats bg-gradient-blue">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-cloud fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-number">自动气象站</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- end col-3 -->
            <!-- begin col-3 -->
            <div class="col-lg-3 col-md-6">
                <a href="javascript:;" style="text-decoration:none; color:#333">
                    <div class="widget widget-stats bg-gradient-purple">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-snowflake fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-number">观冰站</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- end col-3 -->
            <!-- begin col-3 -->
            <div class="col-lg-3 col-md-6">
                <a href="javascript:;" style="text-decoration:none; color:#333">
                    <div class="widget widget-stats bg-gradient-black">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-sun fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-number">气象预报</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- end col-3 -->
        </div>
        <!-- end row -->
        <div class="row ">
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-2 form-group m-b-10">
                            <select id="category" name="category"   class="default-select2 form-control bg-gradient-lime"  onchange="loaddevice()">
                                <option value='气象站'>自动气象列表</option>
                                <option value='观冰站'>观冰站列表</option>
                                <option value='微气象检测装置'>地面设备列表</option>
                            </select>
                        </div>
                        <div class="col-md-2 form-group m-b-10">
                            <div class="row">
                                <label class="col-md-3 col-form-label p-r-0">站点</label>
                                <div class="col-md-9 p-0">
                                    <select id="device" name="device"class="default-select2 form-control bg-gradient-lime"
                                          >
                                        <option value=''>---请选择---</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="row">
                                <label class="col-md-2 col-form-label  text-right">时间</label>
                                <div class="col-md-10 p-0">
                                    <div class="input-group date"
                                         data-date-format="yyyy-mm-dd">
                                        <input type="text" size="16" id="startTime" name="startTime" value=""
                                               class="form-control" placeholder="请选择日期"/>
                                        <span class="input-group-addon"><i
                                                class="fa fa-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="row">
                                <label class="col-md-2 col-form-label text-right">至</label>
                                <div class="col-md-10 p-0">
                                    <div class="input-group date" data-date=""
                                         data-date-format="yyyy-mm-dd" >
                                        <input size="16" id="endTime" name="endTime" type="text" value=""
                                               class="form-control">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-1 form-group ">
                            <input type="button" class="btn btn-warning" id="searchBtn"
                                   style="width: 75px;height: 30px;" value="查询"/>

                        </div>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-2 form-group ">
                            <input type="button" class="btn btn-primary width-full" id="tday"    value="本日"/>

                        </div>
                        <div class="col-md-2 form-group ">
                            <input type="button" class="btn btn-primary width-full" id="tweek"   value="本周"/>

                        </div>
                        <div class="col-md-2 form-group ">
                            <input type="button" class="btn btn-primary width-full" id="tmonth"  value="本月"/>

                        </div>
                        <div class="col-md-2 form-group ">
                            <input type="button" class="btn  btn-primary width-full" id="tquarter" value="本季"/>

                       </div>
                        <div class="col-md-2 form-group ">
                            <input type="button" class="btn  btn-primary width-full" id="tyear"  value="本年"/>

                        </div>
                    </div>
                </div>
       </div>
        <!-- begin row -->
        <div class="row">
        <!-- begin col-6 -->
        <div class="col-lg-6">
            <!-- begin panel -->
          <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h4 class="panel-title">平均气温</h4>
            </div>
            <div class="panel-body">
                <div id="temp" class="height-sm"></div>
            </div>
          </div>

          <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">平均风速</h4>
                </div>
                <div class="panel-body">
                    <div id="ws" class="height-sm"></div>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end col-6 -->
        <!-- begin col-6 -->
        <div class="col-lg-6">
            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>

                    <h4 class="panel-title">平均湿度</h4>
                </div>
                <div class="panel-body">
                    <div id="rh" class="height-sm"></div>

                </div>
            </div>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">平均风向</h4>
                </div>
                <div class="panel-body">
                    <div id="wd" class="height-sm"></div>

                </div>
            </div>
            <!-- end panel -->
        </div>




    </div>
        
        <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>

                </div>
                <h4 class="panel-title">累计降水量</h4>
            </div>
            <div class="panel-body">
                <div id="rain" class="height-sm"></div>
            </div>
            <!-- end panel -->
        </div>


        </div>

    </div>
        <!-- end row -->




    <!-- end #content -->

    <!-- begin scroll to top btn -->

    <!-- end scroll to top btn -->
</div>
<!-- end page container -->

<!-- ================== BEGIN BASE JS ================== -->
<script th:src="@{/assets/plugins/jquery/jquery-3.2.1.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script th:src="@{/assets/plugins/bootstrap/4.1.0/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/assets/plugins/select2/dist/js/select2.js}"></script>
<script th:src="@{/assets/plugins/select2/dist/js/i18n/zh-CN.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:src="@{/assets/plugins/echarts3/echarts.js}"></script>
<!--[if lt IE 9]>
<script th:src="@{/assets/crossbrowserjs/html5shiv.js}"></script>
<script th:src="@{/assets/crossbrowserjs/respond.min.js}"></script>
<script th:src="@{/assets/crossbrowserjs/excanvas.min.js}"></script>
<![endif]-->
<script th:src="@{/assets/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/assets/plugins/js-cookie/js.cookie.js}"></script>
<script th:src="@{/assets/js/theme/default.min.js}"></script>
<script th:src="@{/assets/js/apps.min.js}"></script>
<script th:src="@{/templatesJs/main.js}"></script>
<!-- ================== END BASE JS ================== -->

<script>
    $(document).ready(function() {
        App.init();
        FormSearch.init();
        loaddevice();
        //display();//主要是要这种写法
    });
</script>
</body>
</html>
